<template>
  <div class="search">
    <div class="content">
      <van-row v-if="$store.state.search.searchShow">
        <van-col span="4">
          <!-- 侧边栏 -->
          <van-sidebar v-model="activeKey">
            <!-- 点击左侧侧边栏，触发点击事件，将当前的所在列表名字当做参数使用,同时我们把它存起来，在下个页面进行使用 -->
            <van-sidebar-item v-for="item of  category" :key="item.id" :title="item" @click="tansuo(item)" />
          </van-sidebar>
        </van-col>
        <van-col span="20" :class="navBarFixed == true ? 'navBarWrap' :''">
          <!-- 右边图片 -->
          <van-grid :column-num="3">
            <van-grid-item v-for="item of categorybrandlist" :key="item.id" icon="photo-o" :text="item.brand"
              @click="tofllb(item)" />
          </van-grid>
        </van-col>
      </van-row>
      <!-- 热门搜索 -->
      <div class="hotSearch" v-else>
        <Hotsearch></Hotsearch>
      </div>
    </div>
  </div>

</template>
<script>
import { getCategorylist, categorybrandlist } from '../../api/index'
import Hotsearch from '@/components/Hotsearch'
export default {
  components: {
    Hotsearch
  },
  data () {
    return {
      category: [],
      categorybrandlist: [],
      activeKey: 0,
      navBarFixed: false
    }
  },
  created () {
    this.getCategorylist()
  },
  methods: {
    watchScroll () {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      //  当滚动超过 90 时，实现吸顶效果
      if (scrollTop > 90) {
        this.navBarFixed = true
      } else {
        this.navBarFixed = false
      }
    },
    async getCategorylist () {
      const res = await getCategorylist()
      this.category = res.data.data
    },
    tansuo (item) {
      localStorage.setItem('zhonglei', item)
      categorybrandlist({ category: item }).then(res => {
        this.categorybrandlist = res.data.data
      })
    },
    tofllb (item) {
      localStorage.setItem('paizi', item.brand)
      this.$router.push('/fllb/' + item.brand)
    }
  },
  mounted () {
    window.addEventListener('scroll', this.watchScroll)
  }
}
</script>
<style lang="scss" scoped>
.search{
  margin-top: 14%;
  .van-col--20 {
    width: 83.3%;
    padding-left: 20px;
  }
  .navBarWrap {
    position: fixed;
    top: 3.2rem;
    left: 18%;
    z-index: 999;
  }
}
</style>